<html>
    <head>
        <title>Test</title>
        <style>

          p.foo { color:blue; }
          p.bar { color:green; }

        </style>
        <script type="text/tiscript">

          function self.ready() {
            // create 
            var p = Element.create(<p>paragraph 1</p>);
            $(body).append(p);

            $(body).append(<p>paragraph 2</p>);

            $(body).append(<p.foo>paragraph 3 <strong>with compound</strong> content</p>);

            var list = [
              "paragraph 4 ",
              <strong>with list of</strong>,
              " children"
            ];

            $(body).append(<p.bar>{list}</p>);
          }

        </script>
    </head>
    <body>
       <h1>Demo of <code>Element.create()</code> function that uses SSX literals.</h1> 
    </body>
</html>